<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script src = "js/DivChange.js"></script>
    <script>
        window.onload = function (){
            let oDivLeftMask = document.getElementById('div-left-mask');
            let oDivRightMask= document.getElementById('div-right-mask');
            let oLeftArrow= document.getElementById('left-arrow');
            let oRightArrow= document.getElementById('right-arrow');

            let oDiv1 = document.getElementById('div1');
            let aLi1 = oDiv1.getElementsByTagName('li');    //大图的li,2个li的顺序是对的上的
            let oDiv2 = document.getElementById('div2');
            let aLi2 = oDiv2.getElementsByTagName('li');    //小图的li

            let activeImg = 0;   //当前显示的图片


            //移入左边的遮罩,显示图片
            oLeftArrow.timer = null;    //timer应该设置为传入changeDiv中的对象!
            //设置连等让arrow也触发鼠标移入的事件,否则会因为arrow的优先级过低,鼠标移入arrow后反而会使得arrow消失
            oLeftArrow.onmouseenter=oDivLeftMask.onmouseenter = function() {
                clearInterval(oLeftArrow.timer);
                divChange(oLeftArrow,oLeftArrow.style.opacity,1,'opacity');
            };

            oLeftArrow.onmouseleave=oDivLeftMask.onmouseleave = function() {
                clearInterval(oLeftArrow.timer);
                divChange(oLeftArrow,oLeftArrow.style.opacity,0,'opacity');
            };

            //右边的遮罩
            oRightArrow.timer = null;
            oRightArrow.onmouseenter=oDivRightMask.onmouseenter = function() {
                clearInterval(oRightArrow.timer);
                divChange(oRightArrow,oRightArrow.style.opacity,1,'opacity');
            };

            oRightArrow.onmouseleave=oDivRightMask.onmouseleave = function() {
                clearInterval(oRightArrow.timer);
                divChange(oRightArrow,oRightArrow.style.opacity,0,'opacity');
            };


            for (let i = 0; i < aLi2.length; i++) {
                let oLi1 = aLi1[i];     //大图
                let oLi2 = aLi2[i];     //小图

                oLi1.timer =null;
                //点击事件,小图和大图的效果一起变的
                oLi2.onclick = function () {
                    changeImg(aLi1,aLi2,oLi1,oLi2,i);
                    activeImg = i;
                }
            }

            //点击左边的箭头
            oLeftArrow.onclick = function () {
                //先获取当前的大图/小图,然后变化img效果
                if (activeImg === 0) {
                    activeImg = aLi1.length-1;
                    changeImg(aLi1,aLi2,aLi1[activeImg],aLi2[activeImg]);
                }else {
                    activeImg--;
                    changeImg(aLi1,aLi2,aLi1[activeImg],aLi2[activeImg])
                }
            };

            //点击右边的箭头
            oRightArrow.onclick = function () {
                if (activeImg === aLi1.length-1) {
                    activeImg = 0;
                    changeImg(aLi1,aLi2,aLi1[activeImg],aLi2[activeImg]);
                }else {
                    activeImg++;
                    changeImg(aLi1,aLi2,aLi1[activeImg],aLi2[activeImg])
                }
            };

        };

        function changeImg(aLi1,aLi2,oLi1,oLi2) {
            for (let j = 0; j < aLi2.length; j++) {
                aLi1[j].style.opacity = '0';      //将所有大图的透明度调0
                aLi2[j].style.opacity = '0.2';    //将所有小图的li的透明度调低
            }

            oLi1.style.height = 0+'px';
            aLi1.timer = divChange(oLi1.children[0],0,280,'height');    //从上往下拉伸显现的效果
            oLi1.style.opacity = '1';     //再单独调高被选中小图和大图的透明度
            oLi2.style.opacity = '1';
        }
        //总节:
        //很麻烦,每一个完整的效果都是从一个个小效果拼接出来的
        //剩余还有
        //1.小图鼠标进入后高亮,移出后透明度降低,需要分选中和非选中的情况
        //2.大图变化的时候带效果,从上往下渐变高度;因为图片高度都不一样,所以没办法控制
        //3.小图的左右移动框(超过3个图的时候)
        //不想做了..

    </script>


    <style>
        #div1 {
            top: 100px;
            position: absolute;
            width: 400px;
            height:400px;
            background: grey;
            left: 50%;
            margin-left: -200px;
        }
        #div-left-mask {
            background: hotpink;
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -200px;
            width: 200px;
            height: 400px;
            opacity: 0;
        }

        #div-right-mask {
            background: darkgoldenrod;
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: 0px;
            width: 200px;
            height: 400px;
            opacity: 0;
        }

        #div1 ul {
            position: absolute;
        }

        #div1 li {
            position: absolute;
            left: 0px;
            list-style: none;

        }

        #div1 li img {
            width: 400px;

            background-size: auto;


        }

        #div2 li {
            height : 120px;
            width : 120px;
            float: left;
            margin: 5px;
            background: darkgrey;
            position: relative;
            list-style: none;
            opacity: 0.2;
        }
        #div2 img {
            width : 120px;
            background-size: auto;
        }

    </style>
</head>

<body>



<div >
    <div>
        <!--左右遮罩-->
        <div id="div-left-mask" style="z-index: 100"></div>
        <div id="div-right-mask" style="z-index: 100"></div>
        <!--左右箭头-->
        <img src = "img/left.jpg" height = "50" width = "50" style="top: 300px; left: 50%; margin-left: -200px;position: absolute; opacity: 0;z-index: 10000" id="left-arrow"/>
        <img src = "img/right.jpg" height = "50" width = "50" style="top: 300px; left:  50%; margin-left: 150px;position: relative; opacity: 0;z-index: 10000" id="right-arrow"/>
    </div>

    <!--图片显示区-->

    <div id="div1">

        <li style="opacity: 1;"><img src = "img/轮播002.gif"/></li>
        <li style="opacity: 0;"><img src = "img/轮播003.gif"/></li>
        <li style="opacity: 0;"><img src = "img/轮播004.gif"/></li>
        <li style="opacity: 0;"><img src = "img/轮播001.jpg"/></li>
    </div>

    <!--底下预览小图-->
    <div style="width: 400px; height: 120px; background: #000; position: absolute;left: 50%; margin-left: -200px;top: 500px;" id="div2">
        <ul style="width: 400px; height: 120px; position: absolute; left: -35px; top: -19px;overflow: hidden">
            <li style="opacity: 1"><img src = "img/轮播002.gif" /></li>
            <li><img src = "img/轮播003.gif" /></li>
            <li><img src = "img/轮播004.gif" /></li>
            <li style="opacity: 0;"><img src = "img/轮播001.jpg"/></li>
        </ul>
    </div>

</div>
</body>

</html>